import React from 'react';

import styles from './index.module.less';

export default class Checkbox extends React.Component {
  state = {
    checked: false,
  };

  onCheckBoxChange = e => {
    const checked = e.target.checked;

    this.setState((prevState, props) => {
      const { onChange = null } = props;

      typeof onChange === 'function' && onChange(checked);

      return {
        checked,
      };
    });
  };

  render() {
    const {
      label = null,
      disabled = false,
      defaultChecked = false,
    } = this.props;
    const { checked } = this.state;

    return (
      <label className={styles.checkboxWrapper}>
        <span className={styles.checkbox}>
          <input
            className={styles.checkboxInput}
            type='checkbox'
            checked={defaultChecked ? defaultChecked : checked}
            disabled={disabled}
            onChange={this.onCheckBoxChange}
          />
          {
            checked && <span className={`iconfont icon-gou ${styles.checkboxInner}`}></span>
          }
        </span>
        {
          label && <span className={styles.checkboxLabel}>{label}</span>
        }
      </label>
    );
  }
}
